﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/vue/vue.js"></script>
    <script src="~/element-ui/index.js"></script>
    <link href="~/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/vue/vue-resource.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <title>Index2</title>
</head>
<body>
    <div id="app" style="height:100%">
        <el-container>
            <el-header style="text-align: right; font-size: 12px;background-color:#545c64">
                <el-menu mode="horizontal" background-color="#545c64">
                    <el-menu-item>
                        <img src="~/Img/silvon-inc-20-240.png" style="width:50px;height:50px" />
                        <a style="font-size:30px;color:white">商城管理后台</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/community/index">商品</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a href="/Order/Index" style="font-size:20px;color:white">订单</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/User/Index">用户</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/Promotions/Index">促销</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/MvcController1/Index1">权限</a>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="2"
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             style="height:860px"
                             active-text-color="#ffd04b">
                        <a href="/MvcController1/Index2"><el-menu-item index="1-1">角色管理</el-menu-item></a>
                        <a href="/MvcController1/Index1"><el-menu-item index="1-2">成员管理</el-menu-item></a>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item>
                            <el-button type="primary" @@click="AddEmp">添加</el-button>
                        </el-form-item>
                    </el-form>
                    @*添加弹出框*@
                    <el-dialog title="添加成员信息"
                               :visible.sync="dialogVisible"
                               width="30%"
                               center
                               @@close="resetForm('AddPosition')">
                        <el-form :model="AddPosition" label-width="80px" :rules="rules" ref="AddPosition" class="demo-AddPosition">
                            <el-form-item label="角色名称" prop="positionName">
                                <el-input v-model="AddPosition.positionName"></el-input>
                            </el-form-item>
                            <el-form-item label="是否启用" prop="pstate">
                                <el-radio-group v-model="AddPosition.pstate">
                                    <el-radio label="1">启用</el-radio>
                                    <el-radio label="0">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="职能描述" prop="describe">
                                <el-input type="textarea" v-model="AddPosition.describe"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @@click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @@click="submitForm('AddPosition')">确 定</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    @*修改表单弹框*@
                    <el-dialog title="修改成员信息"
                               :visible.sync="dialogVisible1"
                               width="30%"
                               center
                               @@close="resetForm('EditPosition')">
                        <el-form :model="EditPosition" label-width="80px" :rules="rules" ref="EditPosition" class="demo-EditPosition">
                            <el-form-item label="角色名称" prop="positionName">
                                <el-input v-model="EditPosition.positionName"></el-input>
                            </el-form-item>
                            <el-form-item label="是否启用" prop="pstate">
                                <el-radio-group v-model="EditPosition.pstate">
                                    <el-radio label="1">启用</el-radio>
                                    <el-radio label="0">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="职能描述" prop="describe">
                                <el-input type="textarea" v-model="EditPosition.describe"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @@click="dialogVisible1 = false">取 消</el-button>
                                <el-button type="primary" @@click="submitForm1('EditPosition')">确 定</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    @* 数据网格 *@
                    <div>
                        <el-table :data="tableData"
                                  border
                                  style="width: 100%"
                                  @@selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">

                            </el-table-column>
                            <el-table-column prop="pid"
                                             label="序号"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="positionName"
                                             label="角色名称"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="describe"
                                             label="职能描述"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="createTime"
                                             label="创建时间"
                                             width="200">
                                <template slot-scope="scope">
                                    <span>{{scope.row.createTime.replace("T"," ")}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="pstate"
                                             label="是否启用"
                                             width="180">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.pstate==1">启用</span>
                                    <span v-else="">禁用</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini"
                                               type="primary"
                                               v-on:click="Edit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini"
                                               type="danger"
                                               v-on:click="Delete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                    @*分页*@

                    <el-pagination class="mpage" :model="current"
                                   background
                                   @@size-change="handlesizechange" @*修改显示条数触发事件*@
                                   @@current-change="handleCurrentChange"
                                   :current-page="current.currentPage"
                                   :page-sizes="[2, 4, 6]"
                                   :page-size="current.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="current.total">
                    </el-pagination>
                </el-main>
                </el-container>
                </el-container>
    </div>
    <style>
        /*去掉a标签的下划线*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">

        new Vue({
            el: "#app",
            data() {
                return {
                    tableData: [],
                    //添加
                    AddPosition: {
                        positionName: '',
                        describe: '',
                        pstate: '1',
                    },
                    //修改
                    EditPosition: {
                        positionName: '',
                        describe: '',
                        pstate: '',
                        pid: '',
                    },
                    dialogVisible: false,
                    dialogVisible1: false,
                    rules: {
                        positionName: [
                            { required: true, message: '角色名称不能为空', trigger: 'blur' },
                        ],
                        describe: [
                            { required: true, message: '职能描述不能为空', trigger: 'blur' },
                            { min: 1, max: 50, message: '职能描述长度不能超过50个字', trigger: 'blur' }
                        ],
                    },
                    current: {
                        currentPage: 1,
                        pageSize: 2,
                        total: 0
                    }
                }
            },
            //首次加载
            created: function () {
                this.getData();//显示数据
            },
            methods: {
                //显示数据
                getData() {
                    var url = 'http://localhost:62874/api/Login/GetPosition';
                    this.$http.get(url, { params: { PageIndex: this.current.currentPage, PageSize: this.current.pageSize }}).then(function (result) {
                        this.tableData = result.data.data;
                        this.current.total = result.data.total;
                    });
                },
                //验证数据并提交数据
                submitForm(AddPosition) {
                    this.$refs[AddPosition].validate((valid) => {
                        if (valid) {
                            var url = 'http://localhost:62874/api/Login/AddPosition';
                            var data = JSON.stringify(this.AddPosition);
                            this.$http.post(url, data, { emulateJSON: true }).then(function (result) {
                                if (result.data > 0) {
                                    this.dialogVisible = false;
                                    this.$message.success("添加成功!");
                                    this.getData();
                                } else {
                                    this.dialogVisible = false;
                                    this.$message.success("添加失败!");
                                }
                            });
                        } else {

                            return false;
                        }
                    });
                },
                //反填
                Edit(index, row) {
                    console.log(row);
                    this.dialogVisible1 = true;
                    this.EditPosition = row;
                },
                //修改数据
                submitForm1(EditPosition) {
                    this.$refs[EditPosition].validate((valid) => {
                        if (valid) {
                            var url = 'http://localhost:62874/api/Login/EditPosition';
                            var data = JSON.stringify(this.EditPosition);
                            this.$http.put(url, data, { emulateJSON: true }).then(function (result) {
                                if (result.body > 0) {
                                    this.dialogVisible1 = false;
                                    this.$message.success("修改成功!");
                                    this.getData();
                                } else {
                                    this.dialogVisible1 = false;
                                    this.$message.success("修改失败!");
                                }
                            });
                        } else {

                            return false;
                        }
                    });
                },
                //删除数据
                Delete(index, row) {
                    this.$confirm('您确定是否删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        var url = 'http://localhost:62874/api/Login/DeletePosition';
                        this.$http.delete(url, { params: { id: row.pid } }).then(function (result) {
                            if (result.data > 0) {
                                this.$message.success("删除成功!");
                                this.getData();
                            }
                            else {
                                this.$message.success("删除失败!");
                                this.getData();
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                },
                //将表单数据重置为初始值
                resetForm(AddEmployee) {
                    this.$refs[AddEmployee].resetFields();
                },
                //打开弹出框
                AddEmp() {
                    this.dialogVisible = true;
                },
                //多选
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },
                //显示条数
                handleSizeChange(val) {
                    this.current.pageSize = val;
                    this.getData();
                },
                //第几页
                handleCurrentChange(val) {
                    this.current.currentPage = val;
                    this.getData();
                }
            }
        });

    </script>
</body>
</html>
